<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            border: 1px soild #ccc
        }

        .red {
            color:red
        }
    </style>
</head>
<body>
    <div id="div1" class="container">
        <p>一段文字 1</p>
        <p>一段文字 2</p>
        <p>一段文字 3</p>
    </div>

    <div id="div2" class="container">
        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg" alt="#">
    </div>

    
</body>
<script>
    const div1 = document.getElementById('div1')
    console.log('div1',div1)


    const divList = document.getElementsByTagName('div')
    console.log(`divList.length:${divList.length}`)
    console.log('divList[0]:',divList[0])


    const containerList = document.getElementsByClassName('container')
    console.log(`containerList.length:${containerList.length}`)
    console.log('containerList[0]:',containerList[0])


    const pList = document.querySelectorAll('p')
    console.log('pList',pList)
    // CSS 选择器


    // property 形式  修改的为js内部变量形式，不会对标签产生影响
    const p1 = pList[0]
    p1.style.width = '100px'
    console.log(p1.style.width)
    p1.style.height = '200px'
    console.log(p1.style.height)
    p1.className = 'red'
    console.log(p1.className)

    console.log(p1.nodeName)
    console.log(p1.nodeType) // 1


    // attribute 形式  修改的为标签的一个属性，标签上会有你设置的属性
    p1.setAttribute('data-name:','immoc')
    console.log( p1.getAttribute('data-name:') )
    
    p1.setAttribute('style','font-size:50px;')
    console.log( p1.getAttribute('style') )
</script>

</html>